<template>
    <el-row class="totalHitCard">
        <el-col :xs="24" :sm="12" :md="6" :lg="6" :xl="6">
            <el-card shadow="never" class="cus-card itemTotalCard" v-loading="loading" style="background-image: linear-gradient(-45deg, #4bb1ff 0%, #1d6eff 100%);">
                <div class="title">
                    <el-icon :size="20"><User /></el-icon>
                    <span>新增用户</span>
                    <el-icon :size="15" style="margin-left: 5px">
                        <el-tooltip content="第一次启动应用的用户（App以设备为判断标准）。" placement="top">
                            <WarningFilled />
                        </el-tooltip>
                    </el-icon>
                </div>
                <div class="data">
                    <el-space :size="10" direction="vertical" alignment="normal" class="data-item">
                        <div class="date">今日</div>
                        <div class="date">昨日</div>
                    </el-space>
                    <el-space :size="10" direction="vertical" alignment="stretch" class="data-detail">
                        <div class="value">11.2</div>
                        <div class="value">33.332</div>
                    </el-space>
                </div>
            </el-card>
        </el-col>
        <el-col :xs="24" :sm="12" :md="6" :lg="6" :xl="6">
            <el-card shadow="never" class="cus-card itemTotalCard" v-loading="loading" style="background-image: linear-gradient(134deg, #ff8814 0%, #ffaf38 100%);">
                <div class="title">
                    <el-icon :size="20"><Sunny /></el-icon>
                    <span>活跃用户</span>
                    <el-icon :size="15" style="margin-left: 5px">
                        <el-tooltip content="启动过应用用户（去重），启动过一次的用户即视为活跃用户，包括新用户与老用户。" placement="top">
                            <WarningFilled />
                        </el-tooltip>
                    </el-icon>
                </div>
                <div class="data">
                    <el-space :size="10" direction="vertical" alignment="normal" class="data-item">
                        <div class="date">今日</div>
                        <div class="date">昨日</div>
                    </el-space>
                    <el-space :size="10" direction="vertical" alignment="stretch" class="data-detail">
                        <div class="value">11.2</div>
                        <div class="value">33.332</div>
                    </el-space>
                </div>
            </el-card>
        </el-col>
        <el-col :xs="24" :sm="12" :md="6" :lg="6" :xl="6">
            <el-card shadow="never" class="cus-card itemTotalCard" v-loading="loading" style="background-image: linear-gradient(-45deg, #40cee1 0%, #17a0f5 100%);}">
                <div class="title">
                    <el-icon :size="20"><View /></el-icon>
                    <span>启动次数</span>
                    <el-icon :size="15" style="margin-left: 5px">
                        <el-tooltip content="截止至统计时间，应用的总启动次数。" placement="top">
                            <WarningFilled />
                        </el-tooltip>
                    </el-icon>
                </div>
                <div class="data">
                    <el-space :size="10" direction="vertical" alignment="normal" class="data-item">
                        <div class="date">今日</div>
                        <div class="date">昨日</div>
                    </el-space>
                    <el-space :size="10" direction="vertical" alignment="stretch" class="data-detail">
                        <div class="value">11.2</div>
                        <div class="value">33.332</div>
                    </el-space>
                </div>
            </el-card>
        </el-col>
        <el-col :xs="24" :sm="12" :md="6" :lg="6" :xl="6">
            <el-card shadow="never" class="cus-card itemTotalCard" v-loading="loading" style="background-image: linear-gradient(-45deg, #538efd 0%, #6d5afe 100%);">
                <div class="title">
                    <el-icon :size="20"><Histogram /></el-icon>
                    <span>累计用户</span>
                    <el-icon :size="15" style="margin-left: 5px">
                        <el-tooltip content="截止至统计时间，启动过应用的所有独立用户。" placement="top">
                            <WarningFilled />
                        </el-tooltip>
                    </el-icon>
                </div>
                <div class="data">
                    <el-space :size="10" direction="vertical" alignment="normal" class="data-item">
                        <div class="date">今日</div>
                        <div class="date">昨日</div>
                    </el-space>
                    <el-space :size="10" direction="vertical" alignment="stretch" class="data-detail">
                        <div class="value">11.2</div>
                        <div class="value">33.332</div>
                    </el-space>
                </div>
            </el-card>
        </el-col>
    </el-row>
</template>
<script lang="ts">
import {reactive, defineComponent, onMounted, ref, Ref} from "vue";
import {useI18n} from "vue-i18n";
import IconSvg from "@/components/IconSvg";
import {ArticleChartDataType} from "./data.d";
import {ResponseData} from "@/utils/request";
import {dailynewArticles} from "./service";
import {Histogram, Sunny, User, View, WarningFilled} from "@element-plus/icons-vue";

interface ArticleChartCardSetupData {
    t: (key: string | number) => string;
    loading: Ref<boolean>;
    visitData: ArticleChartDataType;
}

export default defineComponent({
    name: "TotalHitCard",
    components: {WarningFilled, Histogram, View, Sunny, User},
    setup(): ArticleChartCardSetupData {
        const {t} = useI18n();

        // 数据
        const visitData = reactive<ArticleChartDataType>({
            total: 0,
            num: 0,
            week: 0,
            day: 0
        });

        // 读取数据 func
        const loading = ref<boolean>(true);
        const getData = async () => {
            loading.value = true;
            const response: ResponseData = await dailynewArticles();
            const {data} = response;
            visitData.total = data.total || 0;
            visitData.num = data.num || 0;
            visitData.week = data.week || 0;
            visitData.day = data.day || 0;
            loading.value = false;
        }

        onMounted(() => {
            getData();
        })

        return {
            t,
            loading,
            visitData
        }
    }
})
</script>
<style lang="scss" scoped>
.totalHitCard {
    width: 100%;
    .itemTotalCard {
        margin: 20px 8px 20px 8px;
        flex: 1;
        border-radius: 2px;
        .title {
            color: #ffffff;
            align-items: center;
            font-size: 16px;
            display: flex;
            line-height: 24px;
            font-family: PingFangSC-Medium, serif;
            span {
                margin-left: 10px;
            }
        }
        .data {
            margin: 20px 0 10px 0;
            line-height: 30px;
            font-family: PingFangSC-Regular,serif;
            color: #ffffff;
            .data-item {
                width: 30%;
                font-size: 14px;
            }
            .data-detail {
                width: 70%;
                font-size: 24px;
                color: #ffffff;
            }
        }
    }
}
</style>
